<template>
  <div ref="container" class="app-container">
    <div ref="main" :class="['main', (showRight) ? 'has-nav' : 'no-nav']"
         :style="{ padding: (showRight) ?  padding ? `0 ${padding}px` : '0 272px 0 0' : '0' }">
      <div v-if="showStep && $slots.step" class="step-container">
        <slot name="step"></slot>
      </div>
      <div v-if="showBtn && $slots.action" class="action">
        <slot name="action"/>
      </div>
      <slot name="main"></slot>
    </div>
    <div v-if="showRight" :style="{ right: fixRight + 'px' }" class="right-container">
      <nav v-if="showNav" class="nav">
        <slot name="nav"></slot>
      </nav>
    </div>
    <slot/>
  </div>
</template>
<script>
export default {
  name: 'DetailCard',
  props: {
    showStep: {
      type: Boolean,
      default: false
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    showNav: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      padding: '',
      fixRight: '38'
    }
  },
  computed: {
    showRight() {
      return this.showNav || this.showBtn
    }
  },
  mounted() {
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    scroll(y) {
      this.$refs.main.scrollTop = y
    },
    resize() {
      if (document.documentElement.clientWidth > 1960) {
        const width = (this.$refs.container.clientWidth - 1100) / 2
        this.padding = width
        this.fixRight = width - 224
      } else {
        this.padding = ''
        this.fixRight = 38
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/styles/variables.scss";

.app-container {
  position: relative;
  padding: 0 0 24px 24px;
}

.step-container {
  // min-width: 1000px;
  padding: 32px 42px 24px;
  box-shadow: 0px 1px 8px 0px rgba(182, 182, 182, 0.28);
  background: #fff;
  margin-bottom: 24px;
}

.main {
  position: relative;
  margin: 24px 0;
  color: #333;
  font-weight: 400;
}

.no-nav {
  width: 100%;
  max-height: calc(100vh - 142px);
  overflow: auto;
  margin-bottom: 0;
}

.has-nav {
  // width: calc(100% - 272px);
  padding-right: 272px;
  height: calc(100vh - 142px);
  overflow: auto;
  margin-bottom: 0;
}

// @media (min-width: 1960) {
//   .has-nav {

//   }
// }

.right-container {
  position: absolute;
  top: 0;
  margin: 0;
  right: 38px;
  width: 224px;

  ::v-deep.nav {
    .nav-item {
      font-size: $base-content-font-size;
    }
  }
}

.action {
  // width: 224px;
  position: sticky;
  top: 0;
  z-index: 99;
  padding: 8px;
  background: #fff;
  text-align: right;
  box-shadow: 0px 1px 8px 0px rgba(182, 182, 182, 0.28);

  .el-button {
    font-size: $base-button-font-size;
    font-weight: 700;
  }

  //font-size: 14px;
}

::v-deep.nav {
  position: relative;
  width: 224px;
  padding: 16px;
  background: #fff;
  box-shadow: 0px 1px 8px 0px rgba(182, 182, 182, 0.28);
  font-size: 14px;

  .nav-item {
    height: 44px;
    line-height: 44px;
    padding: 0 14px;
    margin-top: 8px;
    font-size: 15px;
    cursor: pointer;

    .image {
      margin-right: 8px;
    }
  }

  .is-common {
    color: #fff;
    background: $base-menu-color-active;
    border-radius: 2px;
  }
}
</style>
